<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="#{webContext.skin0Culomns}"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">


    <ui:define name="center">
        #{linkerEdit.checkRoles()}
        <h:form id="linkerEditForm">
            <p:breadCrumb>  
                <p:menuitem value="#{ml.tr('Home')}" url="#{webContext.baseUrl}" />  
                <p:menuitem value="#{ml.tr('linker_category')}" url="#{webContext.tplUrl}secure/group/list.xhtml" />  
            </p:breadCrumb>
            <ui:include src="#{webContext.skinPatch}statusDialog.xhtml" />

            <p:toolbar>
                <p:toolbarGroup align="left">
                    <p:commandButton type="button"
                                     onclick="confirmationSave.show()"
                                     update="messages"
                                     image="ui-icon ui-icon-disk"
                                     value="#{ml.tr('Save')}"/>
                    <p:divider />
                    <p:dialog header="#{ml.tr('Save')}" modal="true"
                              widgetVar="confirmationSave">
                        <h:outputText value="#{ml.tr('Realy save? Primal setting will be replace.')}" />
                        <h:panelGrid columns="2">
                            <p:commandButton value="#{ml.tr('Yes')}" 
                                             update="linkerEditGrid"
                                             actionListener="#{linkerEdit.save()}"
                                             onclick="statusDialog.show()"
                                             oncomplete="confirmationSave.hide()"/>  
                            <p:commandButton value="#{ml.tr('No')}"
                                             onclick="confirmationSave.hide()" />
                        </h:panelGrid>
                    </p:dialog>

                    <p:commandButton type="button"
                                     onclick="addCategoryDialog.show()"
                                     image="ui-icon ui-icon-plus"
                                     value="#{ml.tr('Add subcategory')}"/>
                    <p:dialog id="addCategoryDialog" widgetVar="addCategoryDialog" modal="true"
                              header="#{ml.tr('Creating new category')}" >
                        <h:panelGrid columns="2">
                            <h:outputText value="#{ml.tr('Name')}: " />
                            <p:inputText value="#{linkerEdit.categoryName}" />
                            <p:commandButton update="linkerEditGrid"
                                             value="#{ml.tr('Add')}" 
                                             actionListener="#{linkerEdit.addSubcategory()}"
                                             oncomplete="addCategoryDialog.hide()"/>
                        </h:panelGrid>
                    </p:dialog>

                    <p:commandButton type="button"
                                     onclick="confirmationRefresh.show()"
                                     image="ui-icon ui-icon-refresh"
                                     value="#{ml.tr('Refresh')}"/>
                    <p:dialog header="#{ml.tr('Refresh')}" modal="true"
                              widgetVar="confirmationRefresh">
                        <h:outputText value="#{ml.tr('Realy refresh? All of change will be return back.')}" />
                        <h:panelGrid columns="2">
                            <p:commandButton value="#{ml.tr('Yes')}" 
                                             update="linkerEditGrid"
                                             actionListener="#{linkerEdit.init()}"
                                             oncomplete="confirmationRefresh.hide()"/>  
                            <p:commandButton value="#{ml.tr('No')}"
                                             onclick="confirmationRefresh.hide()" />
                        </h:panelGrid>
                    </p:dialog>

                    <p:commandButton type="button"
                                     onclick="confirmationDelete.show()"
                                     image="ui-icon ui-icon-circle-close"
                                     value="#{ml.tr('Delete category')}"/>

                    <p:dialog header="#{ml.tr('Deleting category')}" modal="true"
                              widgetVar="confirmationDelete"
                              id="confirmationDelete">
                        <h:outputText value="#{ml.tr('Delete category and all his subcategoris?')}" />
                        <h:panelGrid columns="2">
                            <p:commandButton value="#{ml.tr('Yes')}" 
                                             update="linkerEditGrid"
                                             actionListener="#{linkerEdit.remove()}"
                                             oncomplete="confirmationDelete.hide()"/>  
                            <p:commandButton value="#{ml.tr('No')}"
                                             onclick="confirmationDelete.hide()" />
                        </h:panelGrid>
                    </p:dialog>

                </p:toolbarGroup>
            </p:toolbar>


            <h:panelGrid columns="2" id="linkerEditGrid">
                <p:panel header="#{ml.tr('Category tree')}" style="min-width: 200px; min-height: 500px" >
                    <p:tree value="#{linkerEdit.root}" var="node" expanded="true"
                            id="categoryTree"
                            selectionMode="single" selection="#{linkerEdit.selectedNode}"
                            update="categoryDetailPanel">

                        <p:treeNode>
                            <h:outputText value="#{node.name}"/>
                        </p:treeNode>
                    </p:tree>
                </p:panel>

                <p:panel id="categoryDetailPanel" header="#{ml.tr('Category editor')}"
                         style="width: 100%; min-height: 500px;">

                    <c:choose>
                        <c:when test="#{linkerEdit.detailCategory == null}">
                            Prosím zvolte kategorii.
                            <p:pickList />
                        </c:when>
                        <c:when test="#{linkerEdit.detailCategory != null}">
                            <h:outputText value="#{ml.tr('Name')}: " />
                            <p:inputText value="#{linkerEdit.detailCategory.name}" />
                            <p:pickList value="#{linkerEdit.dualListModel}" 
                                        var="menuItem"
                                        itemLabel="#{ml.tr(menuItem.id)}"
                                        itemValue="#{menuItem}"
                                        converter="#{linkerCategoryConverter}"
                                        iconOnly="true">
                                <f:facet name="sourceCaption">#{ml.tr('Available links')}</f:facet>  
                                <f:facet name="targetCaption">#{ml.tr('Selected links')}</f:facet> 
                            </p:pickList>
                            <p:commandButton value="#{ml.tr('Apply')}" 
                                             actionListener="#{linkerEdit.applyCurentCategory}"
                                             update="messages"/>
                        </c:when>
                    </c:choose>

                </p:panel>
                <p:growl globalOnly="true" id="messages" showDetail="true"/>
            </h:panelGrid>

        </h:form>
    </ui:define>

</ui:composition>
